<template>
	<!-- 我的-我的评价 -->
	<view class="evaluate public">
		<view class="header">
			<view class="header-left">
				<view class="">
					<!-- 50 -->
					{{ keyword.manyi_count }}
				</view>
				<view class="satisfied">
					<image src="../static/satisfied.png" mode=""></image>
					<text>满意</text>
				</view>
			</view>
			<view class="header-right">
				<view class="">
					<!-- 0 -->
					{{ keyword.notmanyi_count }}
				</view>
				<view class="satisfied">
					<image src="../static/noSatisfied.png" mode=""></image>
					<text>不满意</text>
				</view>
			</view>
		</view>
		<view class="evaluateKeyword">
			<view class="title">
				评价关键词
			</view>
			<view class="satisfied smilingFace">
				<image src="../static/satisfied.png" mode=""></image>
				<text>满意</text>
			</view>
			<view class="satisfied-main">
				<view class="satisfied-main-item satisfied-back" v-for="(item, index) in keyword.manyi" :key="index">
					<!-- {{item.conent}} {{item.num}} -->
					{{ item }}
				</view>
			</view>
			<view class="satisfied nosmilingFace">
				<image src="../static/satisfied.png" mode=""></image>
				<text>不满意</text>
			</view>
			<view class="satisfied-main">
				<view class="satisfied-main-item nosatisfied-back" v-for="(item, index) in keyword.notmanyi" :key="index">
					<!-- 关键词语 9 -->
					{{ item }}
				</view>
			</view>
		</view>
		<view class="customEvaluate">
			<view class="title">
				客户评价
			</view>
			<view class="customEvaluate-main">
				<view class="customEvaluate-main-item" v-for="item in customEvaluateArr.list" :key="item.id">
					<view class="userImage">
						<!-- <image :src="item.image" mode=""></image> -->
						<image :src="item.headimg" mode=""></image>
					</view>
					<view class="main">
						<view class="main-title">
							<view class="">
								<!-- {{item.title}} -->
								{{ item.deliveryman_content }}
							</view>
							<view class="">
								<!-- {{item.date}} -->
								{{ item.create_time | formatTime }}
							</view>
						</view>
						<view class="main-icon">
							<view class="satisfied">
								<image :src="item.deliveryman_satisfied == 1 ? satisfied : noSatisfied" mode=""></image>
								<text>{{ item.deliveryman_satisfied == 1 ? '满意' : '不满意' }}</text>
							</view>
						</view>
						<view class="">
							{{ item.deliveryman_satisfied == 0 ? item.deliveryman_content : item.deliveryman_word }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
const $api = require('@/utils/request.js').API
export default {
	data() {
		return {
			satisfied: require('../static/satisfiedColor.png'),	// 笑脸
			noSatisfied: require('../static/noSatisfiedColor.png'),	// 难过
			keyword: [],
			// smilingFaceArr: [
			// {
			// 	id:1,
			// 	conent:'衣着干净',
			// 	num:6,
			// },
			// {
			// 	id:2,
			// 	conent:'配送快',
			// 	num:9,
			// },
			// {
			// 	id:3,
			// 	conent:'态度好',
			// 	num:9,
			// },
			// {
			// 	id:4,
			// 	conent:'态度好',
			// 	num:9,
			// },
			// {
			// 	id:5,
			// 	conent:'态度好',
			// 	num:9,
			// },
			// {
			// 	id:6,
			// 	conent:'配送快',
			// 	num:9,
			// },
			// ],
			customEvaluateArr: [
				// status：0 满意，1 不满意
				// {
				// 	id:1,
				// 	image:'https://img1.baidu.com/it/u=1856720522,683752130&fm=253&fmt=auto&app=138&f=JPEG?w=529&h=500',
				// 	title: '嘿嘿hhhj~',
				// 	date:'2023.03.28',
				// 	status: 0,
				// 	conent:'态度也非常好超级好贼好！！！'
				// },
				// {
				// 	id:2,
				// 	image:'https://img1.baidu.com/it/u=1856720522,683752130&fm=253&fmt=auto&app=138&f=JPEG?w=529&h=500',
				// 	title: '嘿嘿hhhj~',
				// 	date:'2023.03.28',
				// 	status: 1,
				// 	conent:'态度也非常好超级好贼好！！！'
				// },
			]
		}
	},
	onLoad() {
		this.evaluateList()
		this.numberOfEvaluationWords()
	},
	methods: {
		evaluateList() {
			$api.postEvaluateList({
				token: uni.getStorageSync('token')
			}).then(res => {
				this.customEvaluateArr = res.data.data
			})
		},
		numberOfEvaluationWords() {
			$api.postNumberOfEvaluationWords({
				token: uni.getStorageSync('token')
			}).then(res => {
				this.keyword = res.data.data
			})
		}
	}
}
</script>

<style lang="less" scoped>
.evaluate {
	background: #F7F7F7;

	image {
		width: 36rpx;
		height: 36rpx;
	}

	.header {
		display: flex;
		justify-content: space-around;
		text-align: center;
		border-bottom: 1px solid #F0F1F6;
		padding-bottom: 40rpx;
		background: white;

		view {
			view:first-child {
				font-size: 60rpx;
				font-weight: 500;
				color: #444444;
				padding-bottom: 10rpx;
			}
		}
	}

	.title {
		font-size: 28rpx;
		font-weight: 500;
		color: #000000;
		padding-top: 29rpx;
	}

	// 笑脸和难过
	.satisfied {
		display: flex;
		align-items: center;

		text {
			font-size: 24rpx;
			font-weight: 500;
			padding-left: 11rpx;
		}
	}

	// 评价关键词
	.evaluateKeyword {
		// padding-left: 39rpx;
		// padding-right: 38rpx;
		padding: 0 38rpx 5rpx 39rpx;
		border-bottom: 1px solid #F0F1F6;
		background: white;

		.smilingFace {
			padding: 25rpx 0 19rpx 0;
		}

		.nosmilingFace {
			padding-top: 5rpx;
			padding-bottom: 20rpx;
		}

		.satisfied-main {
			display: flex;
			flex-wrap: wrap;

			.satisfied-main-item {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 38rpx;
				font-size: 22rpx;
				font-weight: 400;
				color: #333333;
				border-radius: 3rpx;
				margin: 0 8rpx 19rpx 8rpx;
				padding: 0 14rpx;
			}

			.satisfied-back {
				background: #F2F8FF;
			}

			.nosatisfied-back {
				background: #F5F5F6;
			}
		}
	}

	// 客户评价
	.customEvaluate {
		// padding-left: 39rpx;
		background: white;

		.title {
			padding-left: 39rpx;
			padding-bottom: 37rpx;
		}

		.customEvaluate-main {
			width: 637rpx;
			margin: auto;

			.customEvaluate-main-item {
				display: flex;
				border-bottom: 1px solid #F0F1F6;
				padding: 20rpx 0 20rpx 0;

				.userImage {
					padding-right: 20rpx;

					image {
						width: 78rpx;
						height: 78rpx;
						border-radius: 50%;
					}
				}

				.main {
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;

					.main-title {
						display: flex;
						justify-content: space-between;
						width: 540rpx;

						view:first-child {
							font-size: 26rpx;
							font-weight: 500;
							color: #000000;
							flex: 1;
						}

						view:last-child {
							width: 250rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #999999;
						}
					}

					.main-icon {
						padding: 10rpx 0;
					}
				}
			}
		}
	}
}
</style>